<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>发现</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        .title{border-bottom: 1px solid #eee;margin-bottom: .5rem;}
        .title img{width: 2rem !important;height: 2rem;display: inline-block;}
        .aui-list .aui-list-item-title{font-size: .6rem;}
        .share_btn{font-size: .6rem;border-radius: 10rem;color: #fff;padding: .1rem .4rem;}
        .comment{background: #FDF9F9;border-radius: 8px;padding: 0.5rem;box-sizing: border-box;margin-right: 0.75rem;position: relative;}
        .comment .sjx{float: left;width:0.6rem;height: 0.6rem;background: #FDF9F9;transform: rotate(45deg);position: absolute;top:-0.3rem;left:0.8rem}
        /*.comment .c1{height: 3rem;}*/
        .comment .c1 span{border-radius: .2rem;overflow-y: auto;height: 100%;display: block;color:#666666;}
        .comment .c_b{height: 1.2rem;}
        .comment .c2{background: #FFDFE9;float: right;width:4.1rem;color:#FE417A;height: 1.2rem;line-height: 1.2rem;border-radius: 1.2rem;}
        .comment .c2 img{width:1rem;float: left;margin-left: 0.25rem;margin-top: 0.1rem}
        .aui-list .aui-list-item:active{background: #fff;}
        .aui-slide-wrap{width: 100%;height: 100%;}
        .aui-slide-wrap>div{width: 100%;height: 100%;}
        .aui-slide-wrap img{width: 100%;height: 100%;}
        .checkUl {height: 2rem;line-height:2rem;background: white;border-bottom: 4px solid #EAEAEA;}
        .checkUl ul{height: 100%;}
        .checkUl li{float: left;width: 33%;text-align: center;font-size: 0.8rem;color:#999;}
        .checkUl .checkLi{color: #FE417A;}
        .checkUl .checkLi span{display: inline-block;border-bottom: 2px solid #FE417A;height: 1.7rem;}
        .aui-list{background:white !important;}
        #jb, .jb{background: #FE417A;display: inline-block;}
        .com_btn img{width: 0.7rem !important;height:0.7rem;;margin-right: 0.1rem;}
        .com_btns {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .com_btn{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .aui-list .aui-list-item-right, .aui-list-item-title-row em{max-width: 99%;}
        .aui-media-list .aui-list-item-inner{padding-right: 0.2rem}
        .aui-list .aui-list-item-media{padding-right: 0}
        .aui-slide-page-wrap{position:absolute;bottom:0.3rem;left: 0;height: 0.8rem;width: 100%;}
        .aui-slide-page-wrap .aui-slide-page-dot{width:0.35rem;height: 0.35rem;border-radius: 0.35rem;background: white;display: inline-block;margin: 0 0.1rem;}
        .aui-slide-page-wrap .aui-slide-page-active{width:0.45rem;hieght:0.35rem;background: #FF54C7}
        .source_list_imgs{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .source_list_imgs img{
            width: 32%;
            height: 95px;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <section>
        <div id="aui-slide3" style="overflow: hidden;">
            <div class="aui-slide-wrap" id="banner">
                <div class="aui-slide-node bg-dark" id="default-img">
                    <img src="../image/drsbanner.jpg" />
                </div>

            </div>
            <div class="aui-slide-page-wrap">
                <!--分页容器-->
            </div>
        </div>
    </section>
    <section class="checkUl">
        <ul id="tab">
            <li class="checkLi" onclick="tab(this)"><span>精选单品</span></li>
            <li onclick="tab(this)"><span>好货推荐</span</li> <li onclick="tab(this)"><span>必备素材</span</li> </ul> </section>
                            <section class="aui-content">
                        <ul class="aui-list aui-media-list" id="list">
                            <!-- <li class="aui-list-item">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-inner">

                    	<div class="aui-media-list-item-inner title">
			                <div class="aui-list-item-media" style="width: 3rem;">
			                    <img src="../image/girl.jpg" class="aui-img-round aui-list-img-sm">
			                </div>
			                <div class="aui-list-item-inner ">
			                    <div class="aui-list-item-text">
			                        <div class="aui-list-item-title aui-font-size-14">小编推荐</div>
			                        <div class="aui-list-item-right">
			                        	<div class="jb share_btn"><span class="aui-iconfont aui-icon-share"></span>一键分享</div>
			                        </div>
			                    </div>
			                    <div class="aui-list-item-text">
			                        08:00
			                    </div>
			                </div>
			            </div>

	                    <div class="aui-list-item-text" style="color:#333;">
                            如果谈及中国在技术领域的短板，那么大家可能想到的是发动机，其实还有一样：高级电子芯片！人们通常所说的CPU，所谓CPU即中央处理器，就是其代表产品，它可是为电子信息产品的心脏
                        </div>
                        <div class="aui-list-item-text">
                            <div class="aui-row-padded" style="max-width:90%;">
                                <div class="aui-col-xs-4">
                                    <img src="../image/pro01.jpg" />
                                </div>
                                <div class="aui-col-xs-4">
                                    <img src="../image/pro01.jpg" />
                                </div>
                                <div class="aui-col-xs-4">
                                    <img src="../image/pro01.jpg" />
                                </div>
                                <div class="aui-col-xs-4">
                                    <img src="../image/pro01.jpg" />
                                </div>
                                <div class="aui-col-xs-4">
                                    <img src="../image/pro01.jpg" />
                                </div>
                            </div>
                        </div>

                        <div class="aui-info aui-font-size-12 comment">
                            <div class="aui-col-xs-10 c1">
                            	<span>这个是评论这个是评论这个是评论这个是评论这个是评论这个是评论这个是评论这个是评论这个是评论这个是评论这个是评论这个是评论这个是评论这个是评论</span>
                            </div>
                            <div class="aui-col-xs-2 c2">
                                复制<br/>评论
                            </div>
                        </div>
                    </div>
                </div>
            </li> -->


                        </ul>
    </section>
    <p data-minid="1" id="p"></p>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="./script/judge.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        var header = $api.byId('header');
        headerH = $api.fixStatusBar(header);
        getData();
        slide();
        //下拉刷新
        _Refresh(function () {
            $('#p').attr('data-minid', 1);
            $('#list').html('');
            getData();
        });;
        //流动监听
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 100 //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function (ret, err) {
            getData();
        });
    };

    function slide() {
        var slide3 = new auiSlide({
            container: document.getElementById("aui-slide3"),
            //"width":api.winWidth,
            "height": 150,

            "speed": 500,
            "autoPlay": 3000, //自动播放
            "loop": true,
            "pageShow": true,
            'dotPosition': 'center'
        })
    }

    function getData() {
        var min_id = $('#p').data('minid');
        //$('body').append('<div class="loading-1"><img src="../image/load-1.gif">加载中...</div>');
        _loading2();
        _Ajax(window.APIServer.Faquan, 'post', {
            values: {
                min_id: min_id
            }
        }, 'json', function (ret) {
            //$('.loading-1').remove();
            _loading2_close();
            $('#p').attr('data-minid', ret.data.min_id);
            //.渲染页面
            if (ret.code == 1) { //alert(JSON.stringify(ret.data))
                var evalText = doT.template($api.text($api.byId('goodslist')));
                $api.append($api.byId('list'), evalText(ret.data));
                imageCache('.goods_img');
            } else {
                p--;
                $('body').append('<div class="loading-1">' + ret.msg + '</div>');
            }

        })
    }

    function tab(obj) {
        var tab_li = $(obj);
        $("#tab").children("li").removeClass("checkLi");
        tab_li.addClass("checkLi");
    }
    //复制
    function copyd(obj) {
        var item_id = $(obj).parents('li').data('itemid');
        _loading('加载中...', '', true);
        _Ajax(window.APIServer.Share, 'post', {
            values: {
                item_id: item_id
            }
        }, 'json', function (ret) {
            _loading_close();
            if (ret.code == 1) {
                //广播事件：站内复制
                _SendEvent('app_copy');
                var text = $('#tkl_text').html();
                text = text.replace('$淘口令$', ret.data.tkl);
                $('#tkl_text').html(text);
                copy(text);
            } else {
                _toast(ret.msg)
            }
        });
    }
    //一键分享
    function share(obj) {
        var item_id = $(obj).parents('li').data('itemid');
        _loading('加载中...', '', true);
        _Ajax(window.APIServer.Share, 'post', {
            values: {
                item_id: item_id
            }
        }, 'json', function (ret) {
            _loading_close();
            if (ret.code == 1) {
                //广播事件：站内复制
                _SendEvent('app_copy');
                //修改内容
                var text = $('#tkl_text').html();
                text = text.replace('$淘口令$', ret.data.tkl);
                $('#tkl_text').html(text);
                copy(text);
                //生成海报
                var types = ['淘宝', '天猫', '京东', '拼多多'];
                var makeSharePic = api.require('makeSharePic');
                makeSharePic.makePicture({
                    imgUrl: ret.data.pic,
                    qrCode: ret.data.share_url,
                    expressType: types[ret.data.is_tmall],
                    goodTitle: '           ' + ret.data.title,
                    nowPriceStatus: '现价 ：￥' + ret.data.price,
                    discountType: '券',
                    discountPrice: ret.data.quan_price + '元',
                    finalPriceType: '券后价 ',
                    finalPrice: ret.data.price_after_quan,
                    //    savePath:'cache://image',
                    //    fileName:'share.png',
                    insertImage: true,
                    //    isHtmlText:true,
                }, function (ret, err) {
                    _loading_close();
                    if (ret.status) {
                        var sharedModule = api.require('shareAction');
                        sharedModule.share({
                            type: 'image',
                            path: ret.filePath
                        });
                        //$('#pics').prepend('<div class="aui-col-xs-3 dui"><label><img src="'+ret.filePath+'" /><input class="aui-radio" type="checkbox" name="demo" checked></label></div>');
                        //alert(JSON.stringify(ret));
                    } else {
                        _toast('分享海报生成失败');
                    }
                });
            } else {
                _toast(ret.msg)
            }
        });
    }
    //图片浏览器
    function photo_browser(images, index) {
        var photoBrowser = api.require('photoBrowser');
        photoBrowser.open({
            images: images,
            placeholderImg: 'widget://image/faleimg.gif',
            bgColor: '#000',
            activeIndex: index || 0
        }, function (ret, err) {
            if (ret) {
                if (ret.eventType == 'click') {
                    photoBrowser.close();
                }
                //alert(JSON.stringify(ret));
            } else {
                //alert(JSON.stringify(err));
            }
        });
    }
    String.prototype.replaceAll = function (FindText, RepText) {
        var regExp = new RegExp(FindText, "g");
        return this.replace(regExp, RepText);
    }

    function transformContentData(data) {
        console.log(JSON.stringify(data))
        var replaceBR = data.replaceAll("\r\n", "<br/>")
        return replaceBR
    }

    function transformCopyContentData(data, type) {
        var replaceLT = data.replaceAll("&lt;", "<")
        var replaceGT = replaceLT.replaceAll("&gt;", ">")
        var replaceBR = replaceGT.replaceAll("<br>", "<br/>")
        return replaceBR.substr(1)
    }
</script>
<script id="goodslist" type="text/x-dot-template">
    {{ for (key in it.data){ }}
    <li class="aui-list-item" data-itemid="{{= it['data'][key]['itemid'] }}">
        <div class="aui-media-list-item-inner">
            <div class="aui-list-item-inner">

                <div class="aui-media-list-item-inner title">
                    <div class="aui-list-item-media" style="width: 2.1rem;">
                        <img src="../image/girl.jpg" class="aui-img-round aui-list-img-sm">
                    </div>
                    <div class="aui-list-item-inner ">
                        <div class="aui-list-item-text" style="width:38%;display:inline-block;">
                            <div class="aui-list-item-title aui-font-size-14">小编推荐</div>
                            <div class="aui-list-item-text">
                                {{= it['data'][key]['show_time'] }}
                            </div>
                        </div>

                        <div class="aui-list-item-right com_btns" style="width:60%;float:right;">
                          <div class="jb share_btn com_btn" ><img src="../image/newImg/ckxq.svg" alt=""/>查看详情</div>
                            <div class="jb share_btn com_btn" onclick="share(this)"><img src="../image/newImg/fx.svg" alt=""/>一键分享</div>
                        </div>
                    </div>
                </div>

                <div class="aui-list-item-text" style="color:#333;">
                    {{= transformContentData( it['data'][key]['content'] ) }}
                </div>
                <div class="aui-list-item-text">
                    <div class="aui-row-padded" style="max-width:90%;">
                        {{~it['data'][key]['itempic']:value:index}}
                        <div class="aui-col-xs-4 source_list_imgs">
                            <img src="{{= value }}" onclick='photo_browser({{= JSON.stringify(it['data'][key]['itempic']) }},{{=index}})' tapmoode />
                        </div>
                        {{~}}
                    </div>
                </div>
                <div class="aui-font-size-12" style="color:#999999;font-size:0.7rem;margin:0.4rem 0;">1个小时</div>
                <div class=" aui-font-size-12 comment">
                    <span class="sjx"></span>
                    <div class="c1">
                        <span id="tkl_text" >{{= transformCopyContentData( it['data'][key]['copy_comment'] ) }}</span>
                    </div>
                    <div class="c_b">
                      <div class="c2" onclick="copyd(this)"><img src="../image/newImg/fx1.svg" alt=""/>复制评论</div>
                    </div>
                </div>
            </div>
        </div>
    </li>
{{ } }}
</script>

</html>